<template>
    <div class="user-manage">
     <!-- 查询用户 -->
       <div class="query-form">
             <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="用户ID">
                <el-input v-model="formInline.userId" placeholder="用户ID" clearable />
              </el-form-item>
              <el-form-item label="用户名称">
                <el-input v-model="formInline.userId" placeholder="用户名" clearable />
              </el-form-item>
              <el-form-item label="用户状态" placeholder="用户名"  clearable>
                <el-select
                  v-model="formInline.state"
                  placeholder="用户状态"
                  clearable
                >
                  <el-option label="所有" :value="0" />
                  <el-option label="在职" :value="1" />
                  <el-option label="离职" :value="2" />
                  <el-option label="试用期" :value="3" />
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="Activity time">
                <el-date-picker
                  v-model="formInline.date"
                  type="date"
                  placeholder="Pick a date"
                  clearable
                />
              </el-form-item> -->
              <el-form-item>
                <el-button type="primary" @click="onChaxun">查询</el-button>
              </el-form-item>
            </el-form>
       </div>
       <!-- 用户信息列表 -->
       <div class="base-table" >
           <div class="action">
             <el-button size="small" type="primary" @click="userFormVisible = true" >新增</el-button>
             <el-button size="small" type="danger">批量删除</el-button>
           </div>
 
           <el-table :data="tableData" style="width: 100%;height: calc(100vh - 215px);"  >
           <el-table-column v-for="item in columns" :key="item.label" :label="item.label" :prop="item.prop" />
           <el-table-column align="right" label="操作" width="300">
             <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">出库</el-button>
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">入库</el-button>
               <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
               <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
        </div>
 
        <!-- 新增用户弹窗 -->
        <el-dialog v-model="userFormVisible" title="新增辅料" width="500" center>
          <el-form :model="addUserForm" class="demo-form-inline1">
            <el-form-item label="材料编码" label-width="120px" >
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="材料名称" label-width="120px">
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="厂家" label-width="120px" >
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="颜色" label-width="120px" >
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="材料类型" label-width="120px">
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="粗细" label-width="120px" >
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <!-- <el-form-item>
              <el-button type="primary" @click="onSubmit">Query</el-button>
            </el-form-item> -->
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="quxiaoUserForm">取消</el-button>
              <el-button type="primary" @click="querenUserForm">
                确认
              </el-button>
            </div>
          </template>
        </el-dialog>
    </div>
 </template>
   
   <script setup>
   import { computed, onMounted, reactive, ref } from 'vue'
   import {getCailiaoList} from "../../api/cailiao"
 
   const centerDialogVisible = ref(false)
   const userFormVisible = ref(false)
 
   const tableData = ref([])
   const formInline = ref({
     userId:'',
     userName:'',
     state:''
   })
 
   const addUserForm = ref({
     username:"",
     password:"",
     state:""
   })
 
   const columns = reactive([
     {label:"材料编码",prop:"bianhao"},
     {label:"材料名称",prop:"name"},
     {label:"厂家",prop:"changjia"},
     {label:"颜色",prop:"color"},
     {label:"材料类型",prop:"type"},
     {label:"粗细",prop:"cuxi"},
     {label:"最后登录时间",prop:"lastLoginTime"},
   ])
 
   // 查询按钮
   const onChaxun = ()=>{
     console.log("开始查询")
   }
   
   const qGetUser = ()=>{
    getCailiaoList().then(res=>{
         console.log(res)
         tableData.value = res.data
     })
   }
   
 
   
   const search = ref('')
   const filterTableData = computed(() =>
     tableData.filter(
       (data) =>
         !search.value ||
         data.name.toLowerCase().includes(search.value.toLowerCase())
     )
   )
   const handleEdit = () => {
     console.log(index, row)
   }
   const handleDelete = () => {
     console.log(index, row)
   }
   
 //   const tableData  = [
 //     {
 //       date: '2016-05-03',
 //       name: 'Tom',
 //       address: 'No. 189, Grove St, Los Angeles',
 //     },
 //     {
 //       date: '2016-05-02',
 //       name: 'John',
 //       address: 'No. 189, Grove St, Los Angeles',
 //     },
 //     {
 //       date: '2016-05-04',
 //       name: 'Morgan',
 //       address: 'No. 189, Grove St, Los Angeles',
 //     },
 //     {
 //       date: '2016-05-01',
 //       name: 'Jessy',
 //       address: 'No. 189, Grove St, Los Angeles',
 //     },
 //   ]
 
 // 取消新增用户并清空表单
 const quxiaoUserForm = ()=>{
   userFormVisible.value = false
 }
 //确认新增用户
 const querenUserForm = ()=>{
   console.log(addUserForm.value)
   const data = addUserForm.value
   addUser(data).then(res=>{
     console.log(res)
     qGetUser()
   }).catch(err=>{
     console.log(err)
   })
   userFormVisible.value = false
 }
 
 
   onMounted(()=>{
     qGetUser()
   })
 
   </script>
 <style lang="scss" scoped>
 
 .query-form{
   background: #fff;
   border-radius: 5px;
   padding: 18px 20px 0;
 
 }
 .base-table{
   margin-top: 10px;
   padding: 10px;
   border-radius: 5px;
   background: #fff;
 }
    .addButton{
     margin-bottom: 10px;
    }
    .el-table{
     // border-top: 1px solid #bcbcbc;
    }
    .demo-form-inline .el-input {
   --el-input-width: 190px;
 }
 
 .demo-form-inline .el-select {
   --el-select-width: 200px;
 }
 .action{
   border-radius: 5px 5px 0px 0px;
   padding: 5px 0px 10px 20px;
   border-bottom: 1px solid #ece8ee;
 }
 
 .demo-form-inline1{
   padding: 10px 40px;
  //  margin-left: 50%;
  //  transform: translateX(-50%);
 }
 
 .demo-form-inline1 .el-input {
   --el-input-width: 220px;
 }
 
 .demo-form-inline1 .el-select {
   --el-select-width: 220px;
 }
 </style>